<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>呼叫云</title>
    <link rel="shortcut icon" href="../img/logox_circle.png">
	<link rel="stylesheet" href="../css/modal_style.css">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/jquery-1.11.0.min.js"></script> 
    <script src="../js/config.js"></script>
	<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
	<script src="../js/pintuer.js"></script>
	<script>
		$(function(){
			var page = 1;
			getUserList(page);
			$('#recharge').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
			$(".checkall").click(function(){
				$("#userAlert").css("display","none");
				$("#accountAlert").css("display","none");
				$("#remarkAlert").css("display","none");
				$("#chongzhi").removeAttr("disabled");
			});
			$("#account").click(function(){
				$("#userAlert").css("display","none");
				$("#accountAlert").css("display","none");
				$("#remarkAlert").css("display","none");
				$("#chongzhi").removeAttr("disabled");
			});
			$("#remark").click(function(){
				$("#userAlert").css("display","none");
				$("#accountAlert").css("display","none");
				$("#remarkAlert").css("display","none");
				$("#chongzhi").removeAttr("disabled");
			});
		});
		//隐藏提示
		function hiddenDiv(){
			$("#userAlert").css("display","none");
			$("#accountAlert").css("display","none");
			$("#remarkAlert").css("display","none");
			$("#chongzhi").removeAttr("disabled");
		}
		//获取用户列表
		function getUserList(page){
			$("#chongzhi").removeAttr("disabled");
			var loginName = $("#userName").val();
			var roleCode = $("#roleCode").val();
			$.ajax({
				 url:"getUserList",
				 type: "get",
		         data:{
		         	loginName:loginName,
		         	roleCode:roleCode,
		         	page:page
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == '1'){
		        	 	var userList = data.userList;
		        	 	var html = "";
		        	 	html += '<tr>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="45">选择</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="120">用户名</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="120">用户类型</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="120">公司名称</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="120">姓名</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="120">账户余额</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="120">状态</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="150">创建时间</th>'
								+'<th style="padding-top: 6px;padding-bottom: 6px;" width="150">修改时间</th>'
							+'</tr>'
		        	 	if(userList.length>0){
		        	 		for(var i=0; i<userList.length; i++){
		        	 			html +='<tr>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;"><input type="checkbox" onclick="hiddenDiv()" name="id" value="'+userList[i].userID+'"></td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].loginName+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].roleName+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].entName+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].name+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].balance+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].statusStr+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].createTime+'</td>'
											+'<td style="padding-top: 6px;padding-bottom: 6px;">'+userList[i].updateTime+'</td>'
										+'</tr>'
		        	 		}
		        	 	}else{
		        	 		html +='<tr>'
										+'<td colspan="9">没有相关数据</td>'
									+'</tr>'
		        	 	}
		        	 	$("#userList").html("");
     					$("#userList").html(html);
     					fenye(data);
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
		}
		//分页
		function fenye(data){
			//总条数
			var counts = parseInt(data.count);
			//每页条数
			var pageCount = parseInt('10');
			//总页数
			var pageCouts = "";
			if(counts % pageCount == 0){
				pageCouts =  parseInt(counts/pageCount);
			}else{
				pageCouts =  parseInt(counts/pageCount) + 1;
			}
			//当前页
			var pageNum = parseInt(data.page);
			var html = "";
			if(pageCouts!=1){
				html +=' <div class="page">'
					 +'<a id="first" onclick="firstPage(1)" href="#">【首页】</a><a id="last" onclick="lastPage(\''+(parseInt(data.page)-1)+'\')" href="#">【上一页】</a>'
					if(pageCouts==pageNum){
						html+='<a href="#">【下一页】</a>'
					}else{
						html+='<a onclick="nextPage(\''+(parseInt(data.page)+1)+'\')" href="#">【下一页】</a>'
					}
					 
					 html+='<a onclick="endPage(\''+pageCouts+'\')" href="#">【尾页】</a>　'
					 +'页次：'+pageNum+'/'+pageCouts+'页　共'+counts+'条记录 　'+pageCount+'条记录/页</div>'
					 +'</div>'
			}else{
				html += ' <div class="page">'
					 +'【首页】【上一页】'
					 +'【下一页】'
					 +'【尾页】'
					 +'页次：'+data.page+'/'+pageCouts+'页　共'+counts+'条记录 　'+pageCount+'条记录/页</div>'
					 +'</div>'
			}
				$("#fenye").html("");
				$("#fenye").html(html);
		}
		//首页
		function firstPage(pageNum){
			getUserList(pageNum);
		}
		//上一页
		function lastPage(pageNum){
			if(pageNum != '0'){
				getUserList(pageNum);
			}
		}
		//下一页
		function nextPage(pageNum){
			getUserList(pageNum);
		}
		//尾页
		function endPage(pageNum){
			getUserList(pageNum);
		}
		//充值
		function recharge(){
			$("#chongzhi").attr("disabled","disabled");
			var ok1=false;
			var ok2=false;
			var ok3=false;
			
			var userIDArr =[];    
			$('input[name="id"]:checked').each(function(){    
			   userIDArr.push($(this).val());    
			});
			
			var account ="";
			var remark = "";
			if(userIDArr != ""){
				ok1 = true;
				account = $("#account").val();
				if(account!=""){
					ok2 = true;
					remark = $("#remark").val();
					if(remark != ""){
						ok3 = true;
					}else{
						$("#remarkAlert").css("display","");
					}
				}else{
					$("#accountAlert").css("display","");
				}
			}else{
				$("#userAlert").css("display","");
			}
			
			if(ok1 && ok2 && ok3){
				var userIDStr = userIDArr.join(",");
				$("#chongzhi").attr({"disabled":"disabled"});
				$.ajax({
				 url:"addRecharge",
				 type: "get",
		         data:{
		         	userIDStr:userIDStr,
		         	account:account,
		         	remark:remark
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == '1'){
		        	 	alert("充值成功");
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
            }
		}
	</script>
</head>

<body>
	<form method="post">
	<div class="panel admin-panel">
			<div class="panel-head"><strong>用户列表</strong></div>
			<div class="padding">
				<div style="float:left;padding-top:8px;">用户名：</div>
			<div style="float:left;">
				<input type="text" style="width:140px;height:30px;" class="input" id="userName" name="userName" value="">
			</div>
			<div style="float:left;padding-top:8px;padding-left:20px;">用户类型：</div>
			<div style="float:left;">
				<select class="input" style="width:140px;height:35px;" id="roleCode" name="roleCode">
				<option value="">请选择用户类型</option>
				<option value="'reg-enterprises'">注册企业</option>
				<option value="'reg-customer_service'">注册客服</option>
			</select>
			</div>
			<div style="float:left;padding-left:10px;">
				<input type="button" class="button button-small bg-main" onclick="getUserList('1')" value="搜索">
			</div>
			<br><br>
			<div style="float:left;">
				<input type="button" class="button button-small checkall" name="checkall" checkfor="id" value="全选">
			</div>
			<div style="float:left;padding-left:10px;">
				 <input type="number" style="width:140px;height:30px;" class="input" id="account" name="account" placeholder="请输入充值金额">
			</div>
			<div style="float:left;padding-left:10px;">
				 <input type="text" style="width:200px;height:30px;" class="input" id="remark" name="remark" placeholder="请输入充值备注">
			</div>
			<div style="float:left;padding-left:10px;">
				<input type="button" class="button bg-main button-small" onclick="recharge()" id="chongzhi" value="充值">
			</div>
			<div style="float:left;padding-left:10px;">
				<div id="userAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;display:none;">请选择用户！</div>
				<div id="accountAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;display:none;">充值金额不能为空！</div>
				<div id="remarkAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;display:none;">充值备注不能为空！</div>
			</div>
        </div>
        <table  class="table table-hover table1" style="margin-top:40px;">
        	<tbody id="userList">
        	
        	</tbody>
        </table>
        <div class="panel-foot text-center">
			<div class="page" id="fenye">
				
			</div>
        </div>
    </div>
	</form>
</body></html>